import Icon from '@/components/Icon'
import { RootState } from '@/store'
import {
  addUserChannel,
  deleteChannel,
  getAllChannels,
  getChannels,
  setActiveId,
} from '@/store/action/channel'
import { Channel as ChannelType } from '@/store/reducers/channel'
import history from '@/utils/history'
import { Popup, Tabs, Toast } from 'antd-mobile'
import classNames from 'classnames'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import styles from './index.module.scss'

export default function Channel() {
  const dispatch = useDispatch()

  //获取频道列表数据
  useEffect(() => {
    dispatch(getChannels())
    dispatch(getAllChannels())
  }, [dispatch])

  //获取redux中的频道数据
  const { list, allList } = useSelector((state: RootState) => state.channel)

  const [popupShow, setPopupShow] = useState(false)

  //设置频道高亮
  // const [activeId, setActiveId] = useState(0)
  const { activeId } = useSelector((state: RootState) => state.channel)

  //设置是否可编辑
  const [editAllow, setEditAllow] = useState(true)

  //剩余频道
  // 也可以用第三方库lodash的方法 _.differentBy(allList,list,'id')
  const leftList = allList.filter((item) => {
    //如果obj是undefined 就表示是剩下的频道
    const obj = list.find((item2) => item2.id === item.id)
    return obj ? false : true
  })
  // console.log(1111, leftList)

  //点击添加频道
  const addChannel = (item: ChannelType) => {
    dispatch(addUserChannel(item))
  }

  return (
    <div>
      <div className={styles.channelTabs}>
        <Tabs
          className="tabs"
          activeKey={String(activeId)}
          onChange={(key: string) => {
            dispatch(setActiveId(Number(key)))
          }}
        >
          {list.map((item) => (
            <Tabs.Tab title={item.name} key={item.id}></Tabs.Tab>
          ))}
        </Tabs>
        <div className="right">
          <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
          <Icon type="iconbtn_channel" onClick={() => setPopupShow(true)} />
        </div>
      </div>
      <Popup
        visible={popupShow}
        position="right"
        bodyClassName={styles.channelPopup}
      >
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon
            type="iconbtn_channel_close"
            onClick={() => setPopupShow(false)}
          />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className={classNames('channel-item', editAllow ? 'edit' : '')}>
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击进入频道</span>
              <span
                className="channel-item-edit"
                onClick={() => setEditAllow(!editAllow)}
              >
                {editAllow ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {list.map((item) => (
                <span
                  key={item.id}
                  onClick={() => {
                    dispatch(setActiveId(Number(item.id)))
                    setPopupShow(false)
                  }}
                  className={classNames(
                    'channel-list-item',
                    item.id === activeId ? 'actived' : ''
                  )}
                >
                  {item.name}
                  <Icon
                    onClick={(
                      e: React.MouseEvent<HTMLOrSVGElement, MouseEvent>
                    ) => {
                      e.stopPropagation()
                      if (item.id === 0)
                        return Toast.show({ content: '不能删除推荐频道' })
                      dispatch(deleteChannel(item.id))
                    }}
                    type="iconbtn_tag_close"
                  />
                </span>
              ))}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {leftList.map((item) => (
                <span
                  key={item.id}
                  onClick={() => {
                    addChannel(item)
                  }}
                  className="channel-list-item"
                >
                  + {item.name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  )
}
